import React from 'react';
import { TabBar } from 'antd-mobile';
import { Route } from 'react-router';
import { inject, observer } from 'mobx-react';
import CenterScene from 'pages/center/index';//静态导入
import HospitalScene from 'pages/hospital/index';//静态导入
import ServiceScene from 'pages/service/index';//静态导入

const RouteTab = inject("routing")(observer(({ routing }) => {

  const pathname = window.location.pathname
  const selectedTab = pathname.substr(1, pathname.length)
  const { push } = routing;
  return (
    <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
      <TabBar
        unselectedTintColor='#949494'
        tintColor='#33A3F4'
        barTintColor='white'>
        <TabBar.Item
          title='就诊服务'
          key='service'
          icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg' }}
          selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg' }}
          selected={selectedTab === 'service'}
          onPress={() => { push('/service'); }}>
          <Route path="/service" exact component={ServiceScene} />
        </TabBar.Item>
        <TabBar.Item
          title='个人中心'
          key='center'
          icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
          selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
          selected={selectedTab === 'center'}
          onPress={() => { push('/center'); }}>
          <Route path="/center" exact component={CenterScene} />
        </TabBar.Item>
        <TabBar.Item
          title='医院信息'
          key='hospital'
          icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
          selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
          selected={selectedTab === 'hospital'}
          onPress={() => { push('/hospital'); }} >
          <Route path="/hospital" exact component={HospitalScene} />
        </TabBar.Item>
      </TabBar>
    </div>
  )
}));

export default RouteTab
